<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{ title}}</h2>
      <table>
        <thead>
          <tr>
            <td>序号</td>
            <td>选择</td>
            <td>名称</td>
            <td>图片描述</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(l,i) in goods" :key="i">
            <td>{{i+1}}</td>
            <td>
              <input type="checkbox" v-model="l.check" />
            </td>
            <td>{{l.title}}</td>
            <td>
              <img :src="imgSrc" alt="" style="width: 80px; height: 30px" />
            </td>
            <td>{{l.price}}/元</td>
            <td>
              <input type="number" min="0" v-model.number="l.count" />
            </td>
            <td>{{l.price * l.count | fixed}}</td>
            <td>
              <button @click="goods.splice(i,1)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div>
        <p><input type="checkbox" v-model="quan" />全选反选</p>
        <p><button @click="delCheck">删除选中</button></p>
        <p>数量: {{total}}</p>
        <p>选中数量: {{checktotal}}</p>
        <p>合计: {{amount | fixed}}</p>
        <p>选中合计: {{checkamount | fixed}}</p>
      </div>
    </div>
  </body>
  <script>
    Vue.filter("fixed", (value, n = 2) => {
      if (!value) return value;
      return value.toFixed(n);
    });
    const vm = new Vue({
      data: {
        title: "v-model 快速实现购物车 ",
        goods: [
          { check: false, title: "上衣", price: 200, count: 10 },
          { check: true, title: "裤子", price: 100, count: 10 },
          { check: false, title: "鞋子", price: 500, count: 10 },
          { check: false, title: "风衣", price: 1000, count: 10 },
          { check: true, title: "帽子", price: 300, count: 10 },
          { check: true, title: "西裤", price: 2000, count: 10 },
        ],
        imgSrc: "http://47.104.209.44/base/imgs/1.jpg",
        total: 0,
        checktotal: 0,
        amount: 0,
        checkamount: 0,
      },
      watch: {
        goods: {
          deep: true, //深度监听
          handler(v) {
            console.log(v);
            this.total = 0;
            this.amount = 0;
            this.checktotal = 0;
            this.checkamount = 0;
            v.forEach((item) => {
              this.total += item.count;
              this.amount += item.price * item.count;
              if (item.check) {
                this.checktotal += item.count;
                this.checkamount += item.price * item.count;
              }
            });
          },
        },
      },
      computed: {
        quan: {
          get() {
            // var flag = true;
            // this.goods.forEach(item=>{
            //     if(!item.check){
            //         flag = false
            //     }
            // })
            // return flag;
            return (
              this.goods.length > 0 && this.goods.every((item) => item.check)
            );
          },
          set(v) {
            console.log(v);
            this.goods = this.goods.map((item) => {
              item.check = v;
              return item;
            });
          },
        },
      },
      methods: {
        delCheck() {
          this.goods = this.goods.filter((item) => !item.check);
        },
      },
      mounted() {
        document.querySelectorAll("title")[0].innerHTML = this.title;
        this.goods.forEach((item) => {
          this.total += item.count;
          this.amount += item.price * item.count;
          if (item.check) {
            this.checktotal += item.count;
            this.checkamount += item.price * item.count;
          }
        });
      },
    }).$mount("#app");
  </script>
</html>
